@import "@/assets/style/index.scss";

.side-bar {
  width: $SideBarWidth;
  height: 100%;
  overflow: auto;
  @include flex(column);

  .side-top {
    width: 100%;
    padding: 3em 2em;

    .menu-icon {
      padding: 0.2rem;
      line-height: 1;
      font-size: 0.8rem;
      text-align: center;
      background: linear-gradient(360deg, #809BCD 0%, #D6DBE4 100%);
      color: transparent;
      -webkit-background-clip: text;
    }

    .menu-title {
      position: relative;
      color: #455568;
      font-weight: 600;
      font-size: 0.18rem;
      text-align: center;

      &::after,
      &::before {
        content: "";
        position: absolute;
        width: 0.24rem;
        height: 1px;
        top: 50%;
        background-color: #455568;
        transform: translateY(-50%);
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }
    }
  }

  ::v-deep .ant-menu {
    width: 100%;
    flex: 1;
    border: none;
    color: #455568;
    box-sizing: border-box;
    background-color: transparent;
  }

  ::v-deep .ant-menu-submenu-title {
    font-size: 0.2rem;
    font-weight: 600;
  }

  ::v-deep .ant-menu .ant-menu-item {
    height: 0.64rem;
    font-size: 0.18rem;
    font-weight: 600;
    line-height: 0.64rem;
    &:hover,
    &.ant-menu-item-selected {
      color: #2481FD;
      background: rgba(#2480FD, 0.09);
    }
  }
}